<!-- 
 @Author: LW  
 @Date: 2021-01-08 11:30:38  
 @function: 角色-菜单授权编辑框
 -->
<template>
  <div>
    <!-- ref相当于Id:model是表单内容-->
    <el-form label-width="120px" ref="modifyInfo" :model="formInfo">
      <el-row>
          <!--列表 -->
          <el-table
            class="ptab"
            border
            stripe
            size="small" 
            ref="multipleTable" 
            :data="listData"
            :height="tableHeight"
            row-key="id"
            :default-expand-all="true"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          >
            <el-table-column type="selection" width="55">
              <template slot-scope="scope">
                 <el-checkbox v-model="scope.row.lay_is_checked"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column align="left" prop="name" label="菜单名称" width="280"></el-table-column>
            <el-table-column align="left" prop="application_name" label="所属应用名称" width="280"></el-table-column>
            <el-table-column align="center" prop="function_name" label="功能类型" width="100"></el-table-column>
          </el-table>
      </el-row>
    </el-form>
    <div slot="footer " class="el-dialog__footer">
      <el-button size="mini" @click="closeDialog()">取消</el-button>
      <el-button size="mini" type="primary" :loading="loading" @click="submitForm()">保存</el-button>
    </div>
  </div>
</template>

<script>
import RoleHttp from "@/api/authority/role"; //http
//定义变量
const {
   loadMenusListByRoleId,//根据角色ID获取数据所有菜单和可操作菜单
   saveMenusInfo,//保存菜单授权数据
} = RoleHttp;

export default {
  //组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，需要通过子组件的 props 选项
  //在模板中，要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件
  props: ["formInfo"], //父界面v-bind:editInfo一致
  components: {},
  data() {
    return {
      loading: false, //是显示加载
      //列表相关
      tableHeight: window.innerHeight * 0.65, //表格高度
      listData: [],
      menuIdList:[],//复选框

    };
  },
  /**html加载完成之前，执行。执行顺序：父组件-子组件 */
  created() {
  },
  /**[页面初始化方法]html加载完成后执行。执行顺序：子组件-父组件*/
  mounted() {
    //初始化获取列表
    this.loadMenusList();
  },
  methods: {
    // @select="rowSelect"
    // @select-all="selectAll"
    /*注意在获取初始数据时，所有节点（包括子节点）都增加一个lay_is_checked标志参数*/
    rowSelect(selection, row) {
        if(row.children) { //只对有子节点的行响应
            if (!row.lay_is_checked) {   //由行数据中的元素lay_is_checked判断当前是否被选中
                row.children.map((item) => { //遍历所有子节点
                    this.$refs.multipleTable.toggleRowSelection(item, true); //切换该子节点选中状态
                    item.lay_is_checked = true;
                });
                row.lay_is_checked = true; //当前行lay_is_checked标志元素切换为false
            } else {
                row.children.map((item) => {
                    this.$refs.multipleTable.toggleRowSelection(item, false);
                    item.lay_is_checked = false;
                });
                row.lay_is_checked = false;
            }
        }
    },
    selectAll(selection) {
       // selection 是选中的数据集合
       this.$refs.multipleTable.data.map((items) => { //使用$ref获取注册的子组件信息，用data获取所有行，并用map函数遍历行
        if (items.children) {
            if (!items.lay_is_checked) { //若遍历出来的行未选中
                this.$refs.multipleTable.toggleRowSelection(items, true); //行变为选中状态
                items.lay_is_checked = true; //更新标志参数
                items.children.map((item) => { //遍历子节点并改变状态与标志参数
                    this.$refs.multipleTable.toggleRowSelection(item, true);
                    item.lay_is_checked = true;
                });
            } else { //选中状态同理
                this.$refs.multipleTable.toggleRowSelection(items, false);
                items.lay_is_checked = false;
                items.children.map((item) => {
                    this.$refs.multipleTable.toggleRowSelection(item, false);
                    item.lay_is_checked = false;
                });
            }
        }
        else{
            if (!items.lay_is_checked) {
                items.lay_is_checked = true;
            }
            else {
            items.lay_is_checked = false;
            }
        }
      });
    },
    //获取列表数据
    loadMenusList() {
      let self=this;
      let par={
          roleId:this.formInfo.id
       };
     loadMenusListByRoleId(par).then(response => {
        let data = response.data;
        if (data.Code === 1000) {
          this.listData = data.Data;
          this.listData.forEach(element => {
            if (element.lay_is_checked) {
               self.$nextTick(() => {
                 self.$refs.multipleTable.toggleRowSelection(element,true)}
                );
            }
          });
        } else {
          this.$messageTip.warning(data.Msg); 
        }
      });
    },
    //保存信息
    submitForm() {
      this.menuIdList=[];
      this.loadSelect(this.listData);
      var par = {
        menuIdList: this.menuIdList,
        roleid: this.formInfo.id
      };
      saveMenusInfo(par).then(response => {
        let data = response.data;
        if (data.Code === 1000) {
          this.$emit("callBack", null);
          this.$messageTip.success(data.Msg); 
        } else {
          this.listData = data.Data;
          this.$messageTip.warning(data.Msg);  
        }
      });


    },
    //获取选中项
    loadSelect(listInfo){
       listInfo.forEach(element => {
          if (element.lay_is_checked) {
              this.menuIdList.push(element.id);
          }
          if (element.children) {
              this.loadSelect(element.children);
          }
      });
    },
     //关闭增加弹出框
    closeDialog() {
      this.$emit("callBack", null);
    },
  }
};
</script>
